<template>
  <div id="app">
    <div class="main">
      <div class="loginForm">
        <div class="logoinfo">
          <div class="left">
            <img src="@/assets/login_images/logo.png" alt="">
            <span>用户登录</span>
          </div>
        </div>
        <el-form ref="loginForm" :model="loginForm" :rules="rules">
          <el-form-item prop="username" label-width="auto">
            <el-input v-model="loginForm.username" type="text">
              <svg-icon slot="prefix" icon-class="user" />
            </el-input>
          </el-form-item>
          <el-form-item prop="password" label-width="auto">
            <el-input v-model="loginForm.password" type="password">
              <svg-icon slot="prefix" icon-class="password" />
              <svg-icon slot="suffix" icon-class="eye" />
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import sha256 from 'js-sha256'
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('user')
export default {
  data() {
    return {
      loginForm: {
        username: 'root@admin.com',
        password: '123456'
      },
      rules: {
        username: [
          { required: true, trigger: 'blur', message: '用户名不能为空' }
        ],
        password: [
          { required: true, trigger: 'blur', message: '用户名不能为空' }
        ]
      }
    }
  },
  methods: {
    ...mapActions(['login']),
    async submitForm() {
      await this.$refs.loginForm.validate()
      this.loginForm.password = sha256(this.loginForm.password)
      await this.login(this.loginForm)
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss" scoped>
html {
  height: 100%;
}
#app {
  height: 100%;
  width: 100%;
  background: url(../../assets/login_images/bg.jpg) no-repeat;
  background-size: 100% 100%;
}
.main {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../../assets/login_images/logingBg.png) no-repeat;
  background-position: bottom right;
  z-index: 2;
}
.loginForm {
  position: absolute;
  width: 520px;
  padding: 35px 40px 15px 40px;
  background: #f5f5f5;
  left: 20%;
  top: 25%;
  .logoinfo {
    margin-bottom: 15px;
    display: flex;
    .left {
      display: flex;
      align-items: center;
      span {
        font-size: 22px;
        padding: 0 10px;
      }
    }
  }
  ::v-deep .el-input__inner {
    height: 47px;
    line-height: 47px;
    font-size: 12px;
    padding: 0 50px 0 50px;
  }
  .svg-icon {
    margin: 18px 15px 0 15px;
    color: #889aa4;
    font-size: 12px;
  }
  .el-button--primary {
    width: 100%;
    height: 47px;
    font-size: 22px;
    margin-bottom: 10px;
  }
}
</style>
